<template>
    <div>
        <van-nav-bar
                title="分类"
                left-text="返回"
                left-arrow
                @click-left="$router.back()"
        />

        <van-swipe-cell :right-width="65" :left-width="0" v-for="(cl,index) of classList">
            <van-cell-group>
                <van-cell :title="(cl.className||'分类名为空')" is-link @click="openUpdateConfirm(cl)"/>
            </van-cell-group>
            <span slot="right" class="cell_swipe_rig" @click="delCl(cl)">删除</span>
        </van-swipe-cell>
        
        <div style="margin-top:20px;">
            <van-row type="flex" justify="space-around">
                <van-col span="22"><van-button size="large" type="primary" @click='show=!show' plain>新建分类</van-button></van-col>
            </van-row>
        </div>
        
        <van-dialog
            v-model="show"
            show-cancel-button
            :before-close="beforeClose"
            >
            <van-field
                v-model="className"
                label="分类名"
                placeholder="请输入分类名称"
            />
        </van-dialog>
    </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "ClassList",
  data() {
    return {
      show: false,
      className: "",
      classList: [],
      updateClassInfo: ""
    };
  },
  methods: {
    beforeClose(action, done) {
      const vm = this;
      if (action === "confirm") {
        if (vm.className == "") {
          vm.$toast("类名不能为空");
          done();
          return;
        } else {
          if (vm.updateClassInfo) {
            //修改
            vm.updateClass(() => done());
          } else {
            vm.addClass(() => done()); //添加完成关闭对话框
          }
        }
      } else {
        done();
      }
    },
    //新增分类
    addClass: function(callback) {
      const vm = this;
      let params = {
        className: vm.className,
        createTime: Date.now()
      };
      $.post(vm.serverCfg.LOCSTION_HREF + "addClass", params, function(res) {
        vm.$toast(res.msg);
        vm.className = "";
        callback();
        vm.getClassList();
      });
    },
    //获取分类列表
    getClassList: function() {
      const vm = this;
      $.post(vm.serverCfg.LOCSTION_HREF + "getClassList", {}, function(res) {
        vm.classList = res.data;
      });
    },
    //打开修改类名对话框
    openUpdateConfirm: function(cl) {
      const vm = this;
      vm.show = true;
      vm.updateClassInfo = cl;
      vm.className = cl.className;
    },
    //调用修改类名接口
    updateClass: function(callback) {
      const vm = this;
      let params = {
        id: vm.updateClassInfo._id,
        className: vm.className,
        createTime: Date.now()
      };
      $.post(vm.serverCfg.LOCSTION_HREF + "updateClass", params, function(res) {
        vm.classList = res.data;
        vm.updateClassInfo == "";
        vm.getClassList();
        callback();
      });
    },
    //删除这个分类
    delCl(cl) {
      const vm = this;
      vm.$dialog
        .confirm({
          title: "系统提示",
          message: "确定要删除这个分类吗？"
        })
        .then(() => {
          let params = { id: cl._id };
          $.post(vm.serverCfg.LOCSTION_HREF + "delClass", params, function(
            res
          ) {
            // vm.$dialog.alert({title:'系统提示',message:res.msg});
            vm.$toast(res.msg);
            if (res.status == "1") {
              vm.getClassList();
            }
          });
        });
    }
  },
  created: function() {
    this.getClassList();
  }
};
</script>
<style scoped>
.cell_swipe_rig {
  font-size: 14px;
  display: inline-block;
  line-height: 44px;
  width: 65px;
  text-align: center;
  background: #f00;
  color: #fff;
}
</style>